<template>
  <div class="search-history">
    <van-cell title="搜索历史">
      <div v-if="isEditShow && historyList.length">
        <span @click="delAllHistory">全部删除</span>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span @click="isEditShow=false">完成</span>
      </div>
      <van-icon v-else @click="isEditShow=true" name="delete" />
    </van-cell>
    <van-cell v-for="(item,index) in historyList"
     :key="index"
      :title="item"
      @click="onHistortClick(item,index)">
      <van-icon name="close" />
    </van-cell>
    
  </div>
</template>

<script>
export default {
  name: 'SearchHistory',
  components: {},
  props: {
    // 搜索父组件的内容
    historyList: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      isEditShow:false
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    // 历史记录点击事件
    onHistortClick(val,idx){
      if(this.isEditShow){
        // 删除
        this.historyList.splice(idx,1)
      }else{
        // 跳转
        this.$emit('updateSearchText',val)
      }
    },
    // 删除全部
    delAllHistory(){
      this.historyList.splice(0,this.historyList.length)
    }
  }
}
</script>

<style scoped lang="less"></style>